<template>
  <div>
    <el-dialog :visible="exportVisible" @close="handleCloseExport" :title="exportData.name ? exportData.name: ''" width="600px">
      <el-form ref="formRef" :model="formData" label-width="120px" size="mini">
        <el-form-item label="版本选择：" prop="coreNum" v-if="exportData.exportLabel.includes('版本选择')">
          <el-select size="mini" style="width: 80%" v-model="formData.databaseVersion" clearable @change="handleCoreChange">
            <el-option
              v-for="item in targetVersionList"
              :key="item.databaseNum"
              :label="item.useVersion"
              :value="item.databaseNum"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="中心编号：" prop="coreNum" v-if="exportData.exportLabel.includes('中心编号')">
          <el-select size="mini" style="width: 80%" v-model="formData.coreIds" multiple clearable @change="handleCoreChange">
            <el-option
              v-for="item in coreList"
              :key="item.coreId"
              :label="item.coreCode + '(' + item.coreName +')'"
              :value="item.coreId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="受试者代码：" prop="centerNum" v-if="exportData.exportLabel.includes('受试者代码')">
          <el-select size="mini" style="width: 80%" v-model="formData.subCodes" multiple clearable>
            <el-option
              v-for="item in subjectStatusList"
              :key="item.id"
              :label="item.statusName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="受试者状态：" prop="subjectState" v-if="exportData.exportLabel.includes('受试者状态')">
          <el-select size="mini" style="width: 80%" v-model="formData.subStatuses" multiple clearable>
            <el-option
              v-for="item in subjectStatusList"
              :key="item.id"
              :label="item.statusName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录：" prop="catalogueRadio">
          <el-radio-group v-model="formData.catalogueRadio">
            <el-radio :label="0" disabled>临时</el-radio>
            <el-radio :label="1">永久</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleTimingExport" size="mini">定时导出</el-button>
        <el-button type="primary" @click="handleExport" size="mini">导出</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  name: 'export-task',
  props: {
    exportVisible: {
      type: Boolean,
      default: false,
    },

    exportData: {
      type: Object,
    }
  },
  data() {
    return {
      formData: {
        coreIds: '',
        subCodes: '',
        subStatuses: '',
        catalogueRadio: '',
      },
      formRules: {},
      projectInfo: {},
      coreList: [],
      subjectStatusList: [],
      targetVersionList: []
    }
  },
  
  watch: {
    exportVisible: {
      handler: function (val) {
        if (val) {
          this.projectInfo = {
            projectId: localStorage.getItem('sys-project-id'),
            projectDatabaseId: localStorage.getItem('project-database-Id')
          }
          this.getCoreList()
          this.getSubjectStatusList()
          this.getTargetVersionList()
        }
      },
      immediate: true
    },
  },

  methods: {
    ...mapActions('reportManagement', ['qryPublishedCoreList', 'qryTargetVersionList']),
    ...mapActions('subjectStatus', ['qryProjectSubjectStatusList']),

    // 查询中心列表
    getCoreList() {
      const params = {
        ...this.projectInfo
      }
      this.qryPublishedCoreList({ params }).then((res) => {
        const { code, data } = res
        if (code === 200) {
          this.coreList = data
        }
      })
    },

    // 查询版本
    getTargetVersionList() {
      const params = {
        ...this.projectInfo
      }
      this.qryTargetVersionList({ params }).then((res) => {
        const { code, data } = res
        if (code === 200) {
          this.targetVersionList = data
        }
      })
    },

    // 查询受试者代码
    handleCoreChange(value) {
      console.log('value', value)
      // 查询中心下面的受试者

    },

    // 查询受试者状态
    getSubjectStatusList() {
      const params = {
        projectId: this.projectInfo.projectId,
      }
      this.qryProjectSubjectStatusList({ params }).then((res) => {
        const { code, data } = res
        if (code === 200) {
          this.subjectStatusList = data || []
        }
      })
    },

    handleCloseExport() {
      this.$emit('handleCancel')
      this.$refs.formRef.resetFields()
    },
    // 定时导出
    handleTimingExport() {
      return this.$message.warning('功能开发中,敬请期待~')
    },
    // 导出
    handleExport() {
      const list = this.targetVersionList.filter(item => item.databaseNum === this.formData.databaseVersion)
      const data = {
        ...this.formData,
        ...this.projectInfo,
        databaseId: list && list[0] && list[0].databaseId,
        environment: parseInt(localStorage.getItem('environment'))
      }
      this.$refs.formRef.validate()
      this.$emit('handleExport', data)
    },
  },
}
</script>

<style lang="scss" scoped></style>